<template>
  <div>
    <!-- 这是for和if需要写在自己定义的template模块中 -->
    <template v-for="item in menu">
      <template v-if="item.children">
        <!-- 采取官网的第一个submenu以及连着的第一个template标题插槽 递归先放着，先模块的else-->
        <el-submenu :index="item.path" :key="item.path">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ item.meta.title }}</span>
          </template>
<!-- if-else完了之后就写了递归就好了 -->
<EL_menu_item :menu="item.children"></EL_menu_item>
</el-submenu>
</template>
<!-- 无子选项else部分 要先自己写一个放else的template模块 然后直接只照抄if之后的第一个<el-menu-item>即可，做完这些再回去递归-->
<template v-else>
        <el-menu-item :index="item.path" :key="item.title">
          <i class="el-icon-location"></i>
          <span slot="title">{{ item.meta.title }}</span>
        </el-menu-item>
      </template>
</template>
</div>
</template>

<script>
    export default {
        name: "EL_menu_item",
        props: ["menu"],
    };
</script>

<style>
    /* .el-submenu .el-menu-item {
        min-width: 0px !important;
    } */
    /* 处理选中有凹型边框的问题是padding*/
    
    .el-submenu__title {
        padding: 0px !important;
    }
</style>